<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>kuangstudy-支付宝支付</title>
    <link rel="stylesheet" href="/css/main.css">
</head>
<body>
<!--页面头部-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light">
    <div class="container">
        <a class="navbar-brand logo" href="/">
            <img style="width: 112px;" src="https://www.kuangstudy.com/assert/images/index_topleft_logo_black.png"
                 alt="">
        </a>
        <div class="collapse navbar-collapse position-relative">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item position-relative">
                    <a class="nav-link ksd-nav-linknav nav-link-course" href="https://www.kuangstudy.com/course">课程</a>
                    <i class="iconfont  ksd-bgd-left">免费</i>
                </li>
                <li class="nav-item">
                    <a class="nav-link ksd-nav-linknav nav-link-topics active" href="https://www.kuangstudy.com/bbs">江湖</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link ksd-nav-linknav nav-link-down" href="https://www.kuangstudy.com/app">导航</a>
                </li>
            </ul>
            <div id="ksdloginbox">
                <div style="position: relative;top:-18px">
                    <div class="tipmessage-box" style="cursor: pointer"><i
                            class="iconfont iconiconfontunie62c tp1 pr pr-1"></i><span
                            class="im-notify ksd-im-number im-number im-center" style="display: none"></span>消息
                    </div>
                    <div class="i-frame animated2 fadeInDown"></div>
                    <div class="ksd-logindrop show" data-vip="2">
                        <a href="/u" class="ksd-home pr tp2" style="z-index: 11"><i
                                class="iconfont iconhome pr  pr-1"></i>进入主页</a>
                        <a class="dropdown-toggle ksd-user-info" href="javascript:void(0);" title="飞哥" data-vip="2"
                           id="navbarDropdown">
            <span class="pr">
                <img class="ksd-avatar2 ksd-avatar-img"
                     src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTLKOLqaRTzOiaoueuFOB5zeicswh0XTNFor1icic3oQop1PsUQ6rlChOIh5q4ILyicFLYFGsiceN74dONoQ/132"
                     alt="">
                <span class="ksd-iconrenzheng-vip"><img src="/assert/images/vip.png" alt=""></span>
            </span>
                            <span class="ksd-text">飞哥</span>
                        </a>
                        <div class="ksd-login-items">
                            <div class="ksd-header-items mt-3">
                                <ul>
                                    <li class="ksd-num-items">
                                        <a href="/u#topic">
                                            <span class="num ksd-num-count6">3</span>
                                            <span class="ktext">文章</span>
                                        </a>
                                    </li>
                                    <li class="ksd-num-items">
                                        <a href="/u#fans">
                                            <span class="num ksd-num-count1">7</span>
                                            <span class="ktext">关注</span>
                                        </a>
                                    </li>
                                    <li class="ksd-num-items">
                                        <a href="/u#follow">
                                            <span class="num ksd-num-count2">471</span>
                                            <span class="ktext">粉丝</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <div class="citems ksd-sign-items">
                                    <a href="javascript:void(0);" data-num="2" class="ksd-user-qiandao"><i
                                            class="iconfont iconsetlocation pr-2 pr tp1"></i><span
                                            class="ksd-uqtext">签到</span></a>
                                </div>
                            </div>
                        </div>
                        <div class="ksd-login-items">
                            <ul>
                                <li class="items">
                                    <a href="/u" style="width:126px;text-align:left" title="点击前往个人中心"
                                       class="fl flitems"><i class="iconfont iconhome"></i>个人中心</a>


                                    <a href="/vip/pay" title="点击前往订购和续费" class="fr fritems pr"><span class="vipicon fw"
                                                                                                     style="padding:2px 6px">年会员</span></a>


                                </li>
                                <li class="items ksdcopylinknum" title="点击复制数字账号" data-clipboard-text="2">

                                    <a href="/u/settings" style="width:160px;text-align:left"
                                       class="fl ksd-settings2 flitems"><i class="iconfont iconiconzh1"></i>账号</a>
                                    <a href="javascript:void(0);" class="fr ksd-settings2 fritems">2</a>
                                </li>
                                <li class="items ksd-exp-itemboxs">
                                    <a href="javascript:void(0);" class="fl flitems"><i
                                            class="iconfont icondengji2 tp1 pr"></i>等级</a>
                                    <a href="javascript:void(0);" class="fr fritems ksd-coin-exp show1"
                                       data-exp="74000"><span class="ksd-num-exp">74000</span>exp</a>
                                    <a href="javascript:void(0);"
                                       class="fr fritems show2 ksd-coin-exp ksd-coin-exp-text" data-exp="74000">Lv6</a>
                                </li>
                                <li class="items">
                                    <a href="javascript:void(0);" class="fl flitems"><i class="iconfont iconjinbi"></i>K币</a>
                                    <a href="javascript:void(0);" class="fr fritems ksd-coin-coin"
                                       data-coin="4814887"><span
                                            class="ksd-coin-cointext ksd-num-coin">4814887</span><span
                                            class="pr ftp2">币</span></a>
                                </li>
                                <li class="items" title="订购会员">


                                    <a href="/vip/pay" style="text-align:left" class="fl ksd-settings2 flitems"><i
                                            class="iconfont iconVIP_paiban"></i>查看会员权益</a>
                                </li>
                                <li class="items">
                                    <a href="/u/settings" style="width:100%;text-align:left" class="fl flitems"><i
                                            class="iconfont iconSettingscontroloptions"></i>个人设置</a>
                                </li>
                            </ul>
                        </div>
                        <div class="ksd-login-items bnone">
                            <ul>
                                <li class="items">
                                    <a href="javascript:void(0);" class="fl flitems ksd-logout"><i
                                            class="iconfont iconai-out"></i>退出登录</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<!--内容区域-->
<div class="container" style="margin-top: 55px" id="app">
    <h1 class="text-center fz32 mb-5"><a href="https://www.kuangstudy.com/app/code">笔记下载：https://www.kuangstudy.com/app/code</a>
    </h1>
    <div class="alert alert-primary" id="ksd-alert-msg-1">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong><i class="iconfont icontubiao_xitongtongzhi fz20"></i></strong><span class="pl-2 ccmsg">教程提供者：秦疆（遇见狂神说）、徐成飞（飞哥），作者已授权！Bilibili地址：<a
            href="https://space.bilibili.com/95256449" target="_blank">https://space.bilibili.com/95256449</a></span>
    </div>
    <div class="row course-item-wrap">
        <div class="col-lg-12">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade show active">
                    <div class="row">
                        <div class="col-lg-12 text-center" id="paycoursebox">
                            <img :src="'/alipay/pay?courseid='+courseId" alt="">
                        </div>
                    </div>
                    <div class="row course-block">
                        <div id="courseListBox" class="course_bdleft Mtp25">
                            <div class="course_stage_item">
                                <h2 class="ksd-title-position-h2" index="1" id="ksd-title-position-1">
                                    <span class="cro_icon1">1</span>
                                    <span>第一阶段：JavaSE</span>
                                </h2>
                                <div class="path-course-r">
                                    <div class="row">
                                        <div v-for="(course,index) in  courseList" class="col-lg-3 col-md-4 col-sm-6 animated fadeInUp delay-1s">
                                                <div class="course-item">
                                                    <div class="course-img ">
                                                        <a :href="'https://www.kuangstudy.com/course/detail/'+course.courseid" target="_blank" title="聊聊编程这条路"
                                                           class="course__img">
                                                        <img height="140" width="100%"
                                                             :src="'https://www.kuangstudy.com/'+course.img"
                                                             style="">
                                                        <span class="num">1</span>
                                                        <span class="stimer">￥{{course.price}}</span>
                                                        </a>
                                                    </div>
                                                    <div class="course-content">
                                                        <h3 title="聊聊编程这条路" class="course__title"><a :href="'https://www.kuangstudy.com/course/detail/'+course.courseid" target="_blank" title="聊聊编程这条路"
                                                                                                     class="course__img">{{course.title}}</a></h3>
                                                        <p class="course__author">{{course.intro}}？</p>
                                                        <div class="course-price-wrap" @click="paycourse(index)">
                                                                <span class="course__btn"><i class="iconfont iconshouye"></i>  点击支付</span>
                                                        </div>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            ptimer:null,
            courseList: [],
            courseId:"",
            pcourseId:""
        },
        created: function () {
            this.loadCourse();
        },
        methods: {
            loadCourse: function () {
                var that = this;
                axios.post("/api/course/list").then(function (res) {
                    if(res.data.code == 20000) {
                        that.courseList = res.data.data.courseList;
                        that.courseId = that.courseList[0].courseid;
                    }
                })
            },
            paycourse:function(index){
                var that = this;
                that.courseId = that.courseList[index].courseid+"&d="+new Date().getTime();
                that.pcourseId = that.courseList[index].courseid;
                that.paycallback();
            },

            paycallback : function(){
                var that = this;
                var courseid = that.pcourseId;
                if(that.ptimer)clearInterval(that.ptimer);
                that.ptimer = setInterval(function(){
                    axios.post("/api/paycallback/course",{courseid:courseid}).then(function(res){
                        if(res.data.code == 20000){
                            clearInterval(that.ptimer);
                            alert("支付成功!!!");
                        }
                    })
                },3000);
            }
        }
    })
</script>
</body>
</html>